// ---------------  创建剪裁区 ------------------
// - 找到剪裁区的图片 （img#image）
var $image = $('#image');
// - 设置配置项
var option = {
    // 纵横比(宽高比)
    aspectRatio: 1, // 正方形
    // 指定预览区域
    preview: '.img-preview' // 指定预览区的类名（选择器）
};
// - 调用cropper方法，创建剪裁区
$image.cropper(option);


//********** 点击 上传 按钮 能够选择图片 **************************************
$('button:contains("上传")').on('click', function () { 
    //触发文件域的单击事件
    $('#file').trigger('click')
    
})


//**********当文件域内容改变,更换剪裁区图片******************
$('#file').on('change', function () { 
    // console.dir(this)
    //判断,如果选择了图片
    if (this.files.length > 0) {
        //为选择的图片生成临时url
        //1.找文件对象
        let fileObj = this.files[0]
        // 2.创建url
        let url = URL.createObjectURL(fileObj)
        // console.log(url);
        //更换剪裁区的图片(销毁剪裁框 --> 更换图片 --> 重新生成剪裁框)
        $image.cropper('destroy').attr('src', url).cropper(option);
    
    }
})


//************* 点击确定, 剪裁图片, 更换头像 ********************************* 
$('button:contains("确定")').on('click', function () { 
    // 剪裁图片   canvas 就是h5中的画布
    //30*30 的大小是因为 我们页面盒子的大小就是30*30 的
    let canvas = $image.cropper('getCroppedCanvas', { width: 30, height: 30 })
    // 把canvas转成借口要求的base64格式字符串
    // let base64 = canvas.toDataURL('图片类型png/ipeg', 图片的质量, 0-1之间, 0最差,1最好 只有在ipeg可以使用);
    let base64 = canvas.toDataURL();
    // console.log(base64);
    //提交ajax
    $.ajax({
        type: 'POST',
        url: '/my/user/avatar',
        data: { avatar: base64 }, // { id: 1 }
        success: function (res) {
            //无论成功失败 给提示
            layer.msg(res.message);
            if (res.status === 0) {
                // 更新父页面index.html的头像
                window.parent.getUserInfo();
            }
        }
    })
})